{% extends 'website/base.html' %}

{% load static %}
{% block header %}
    <link rel="stylesheet" href={% static 'website/navbar.css' %}>
    <link rel="stylesheet" href={% static 'website/grid.css' %}>
{% endblock %}

{% block page %}
    <nav class="ccnavbar row">
        <a class="ccnavbar-item col-1" href={% url 'welcome' %} target="page">
            <img src={% static 'website/logo.png' %} alt="logo" height=56 width=56>
        </a>
            <div class="ccnavbar-item col-4" id="audio-player">
                <audio controls>
                    <source src="{{ radio_url1 }}">
                    <source src="{{ radio_url2 }}">
                    <source src="{{ radio_url3 }}">
                    Your browser does not support the audio tag.  :(
                </audio>
            </div>
            <div class="ccnavbar-item col-4" id="searchbar">
                <a href="#">Search</a>
            </div>
            <div class="ccnavbar-item col-3" id="user-menu">
                {% if user.is_authenticated %}
                    {{ user.username }} |
                    <a href="{% url 'logout' %}" target="_top">Logout</a>
                {% else %}
                    <a href="{% url 'login' %}" target="_top">Login / Register</a>
                {% endif %}
            </div>
        </div>
    </nav>
{% endblock %}

